<template>
  <div class="opd-basic-search" @click.stop="activeMetaTo" :class="activeClass">
    <draggable :list="metas" group="func" class="opd-area-drag opd-obs-form" layout="inline"
           component="a-form" :labelCol="model.labelCol" :wrapperCol="model.wrapperCol">
      <template v-for="meta in metas" :key="meta.id">
        <ivz-search-item :meta="meta" :span="span"/>
      </template>
    </draggable>
    <div style="text-align: right">
      <template v-for="item in funcMetas" :key="item.func">
        <AButton type="primary" class="lcd-func-btn">{{ item.name }}</AButton>
      </template>
    </div>
  </div>
</template>

<script>
import MetaUtils from "@/utils/MetaUtils";
import {ComponentType} from "@/store/consts";
import {mapGetters, mapMutations} from "vuex";
import {getSearchFormTabModel, SearchMeta} from "@/metas/SearchFormMetas";
import IvzBtnItem from "@/components/item/IvzBtnItem.vue";
import IvzSearchItem from "@/components/item/IvzSearchItem.vue";
import ActiveMetaMixin from "@/components/mixins/ActiveMetaMixin";
import {EventBus, EventType, FunEventType, MetaEventType, MetaRemoveEvent} from "@/event";
import {FuncMetasMap} from "@/components/OptionsMetaData";
import Utils from "@/utils/basic.utils";
import {htmlTableFieldTabMetas} from "@/metas/HtmlTableMetas";

export default {
  name: "IvzBasicSearch",
  mixins: [ActiveMetaMixin],
  components: {IvzBtnItem, IvzSearchItem},
  computed: {
    ...mapGetters({
      meta: 'searchMeta',
      metas: 'searchMetas',
      model: 'listTabModel',
      funcMetas: 'searchFunMetas',
    }),
    span() {
      return 24 / this.model['column']
    }
  },
  data() {
    return {
      type: ComponentType.Search
    }
  },
  created() {
    if(Utils.isBlank(this.meta['tabMetas'])) {
      this.setSearchTabMetas(SearchMeta);

      this.funcMetas.push({func: 'query', name: FuncMetasMap['query']});
      this.funcMetas.push({func: 'add', name: FuncMetasMap['add']});
      this.funcMetas.push({func: 'reset', name: FuncMetasMap['reset']});
    } else {
      this.meta['tabMetas'] = SearchMeta;
    }
    EventBus.listener(MetaEventType.formAfterCreate, meta => {
      let viewTo = meta.tabModel['fieldView'];
      if(viewTo && viewTo.includes('search')) {
        EventBus.publish(EventType.toSearch, meta);
      }
    });

    EventBus.listener(EventType.toSearch, (formMeta) => {
      let {type, id, title, field} = formMeta['tabModel'];
      if(type == 'textarea') {
        return this.$msg.warningMessage("[文本域]不支持放在搜索栏", 1);
      }
      if(type == 'password') {
        return this.$msg.warningMessage("[密码框]不支持放在搜索栏", 1);
      }
      if(type == 'upload') {
        return this.$msg.warningMessage("[文件上传]不支持放在搜索栏", 1);
      }

      let tabModel = getSearchFormTabModel(formMeta['tabModel']);
      let meta = {id, type, tabModel, active: false}
      this.updateSearchFormMetas(meta)
    });

    EventBus.listener(EventType.formTitle, ({val, id}) => {
      let meta = MetaUtils.getMetaById(this.metas, id);
      if(meta) {
        meta['tabModel']['title'] = val;
      }
    });

    EventBus.listener(EventType.formField, ({val, id}) => {
      let meta = MetaUtils.getMetaById(this.metas, id);
      if(meta) {
        meta['tabModel']['field'] = val;
      }
    });

    EventBus.listener(MetaRemoveEvent.delEditMeta, meta => {
      this.removeSearchFormMeta(meta);
    });

    // 监听新增功能点事件
    EventBus.listener(FunEventType.addSearchFunc, (value) => {
      let map = value.map(func => { return {func, name: FuncMetasMap[func]}});
      this.funcMetas.length = 0;
      this.funcMetas.push(...map)
    })
  },
  mounted() {
    // 监听功能组件事件(设置功能数据)
    // EventBus.publish(FunEventType.searchFun, getFunTabMetas(ComponentType.Search));
  },
  methods: {
    ...mapMutations(['updateSearchFormMetas', 'removeSearchFormMeta', 'removeSearchFunMeta'])
  }
}
</script>

<style>
.opd-obs-form {
  width: 100%;
  height: 100%;
}

.opd-basic-search {
  width: 100%;
  padding: 16px;
  position: relative;
}
.opd-basic-search,.opd-obs-form {
  min-height: 68px;
}
.ivz-basic-search .ant-form-item {
  margin-bottom: 8px;
}
.lcd-func-btn {
  margin: 0px 3px;
}
</style>
